<template>
  <div class="pageListWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="searchWrap">
                <span class="searchFont">调度时间:</span>
                <span class="searchInputFont">
                     <el-date-picker
                       style="width: 100%;"
                       v-model="value6"
                       type="daterange"
                       align="left"
                       @change="searchRowsInfo()"
                       placeholder="选择日期范围"
                       size="mini"
                       :picker-options="$store.state.pickerOptions2">
                      </el-date-picker>
                </span>
              </div>
            </el-col>
            <!--<div style="float: right;margin-right: 10px;">
              <el-button type="primary" size="mini" @click="searchRowsInfo()">查询</el-button>
            </div>-->
          </el-row>
        </div>
      </div>
      <div class="tableContainer">
        <div class="tableInner" ref="tableInnerWrap">
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            style="width: 100%"
          >
            <el-table-column
              prop="enterpriseName"
              label="企业名称"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="vehicleCount"
              label="调度车辆数量"
            >
            </el-table-column>
            <el-table-column
              prop="dispatchTime"
              label="调度时间"
            >
            </el-table-column>
            <el-table-column
              label="调度起点"
              prop="startAddress"
            >
            </el-table-column>
            <el-table-column
              prop="endAddress"
              label="调度终点"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="Pagination" style="text-align: left;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 30, 50, 100,200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:[],
    data(){
      return {
        rows: [],
        allRows: '',
        currentRow: null,
        offset: 0,
        limit: 8,
        count: 0,
        currentPage: 1,
        elecInfo: "",
        pageSize: 10,
        //以下为搜索
        value6: "",
        tableHeight:"200",
        searchInfo: {
          beginTime: "",
          endTime: "",
        },
      }
    },
    components: {

    },
    created(){
      this.searchRowsInfo()
    },
    mounted(){
      this.$nextTick(()=>{
        //表格滚动
        this.tableHeight=document.querySelector(".pageListWrap").clientHeight-160
      })
    },
    methods: {

      searchRowsInfo(val){
        val?"":this.currentPage=1
        if (this.value6&&this.value6[0] != null) {
          this.searchInfo.beginTime = this.dtime(this.value6[0]).format('YYYY-MM-DD 00:00:00')
          this.searchInfo.endTime = this.dtime(this.value6[1]).format('YYYY-MM-DD 23:59:59')
        } else {
          this.searchInfo.beginTime = ""
          this.searchInfo.endTime = ""
        }

        this.axios.post(process.env.API_HOST + `/enterprise/selectDispatchGrid`, {
          page: this.currentPage,
          rows: this.pageSize,
          beginTime: this.searchInfo.beginTime,
          endTime: this.searchInfo.endTime,
        })
          .then(response => {
            const result = response.data
            if (result.code === 200) {
              this.rows = result.rows
              this.count = result.total
            }
          })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.searchRowsInfo()
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.searchRowsInfo(val)
      },

    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" >
  @import "../../../common/stylus/mixin.styl"
  .pageListWrap
    page()

</style>
